<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%> <%@ page import="com.lp.cfg.ProConfig"%> <%@ taglib
prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fn"
uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
  <head>
    <title><%=ProConfig.PROJECT_NAME %></title>
    <%@ include file="/WEB-INF/wechat/iot/common/resource_lib.jsp"%>
    <style>
      a,
      a.link {
        color: #666;
        text-decoration: none;
        font-weight: 500;
      }
      a,
      a.link:hover {
        color: #666;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-weight: normal;
      }
      .login {
        width: 100%;
        height: 100%;
        background: url(<%=basePath%>/image/wechat/iot/login-bg.png) no-repeat;
        background-size: cover;
        position: fixed;
        z-index: -10;
      }
      .welcome {
        width: 100%;
        margin: 20% 0;
      }
      .welcome img {
        width: 100%;
      }
      .login-inp {
        margin: 0 30px 15px 30px;
        border: 1px solid #fff;
        border-radius: 25px;
      }
      .login-inp label {
        width: 8em;
        text-align: center;
        display: inline-block;
        color: #fff;
      }
      .login-inp input {
        padding: 12px 0;
        color: #fff;
        background-color: transparent;
        border: none;
        outline: none;
      }
      .login-inp a {
        display: block;
        width: 100%;
        text-align: center;
        line-height: 40px;
        color: #fff;
        font-size: 16px;
        letter-spacing: 5px;
      }
      .login-txt {
        color: #fff;
        margin-top: 30px;
        text-align: center;
      }
      .login-txt a {
        color: #fff;
        padding: 0 5px;
        font-size: 16px;
        cursor: pointer;
      }
      .welcome {
        font-size: 28px;
        color: #fff;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="login">
      <div class="welcome">
        <span>SMS login</span>
      </div>
      <div
        class="login-form jui-form_submit"
        data-options=" url:'/user/sms/login',
												  submit:'.loginbtn',
												  success:'sunccessReturn' ">
        <div class="login-inp">
          <label>Phone Number</label>
          <input
            validate="empty:Please enter your mobile phone number"
            class="name"
            type-name="name"
            type="text"
            placeholder="" />
        </div>
        <div class="login-inp" style="position: relative">
          <label>Picture code</label>
          <canvas
            style="
              position: absolute;
              right: 0;
              border-radius: 25px;
              top: 0px;
              width: 100px;
              height: 39px;
              background: #fff;
            "
            onclick="reflash()"
            id="canvas2"></canvas>
          <input
            validate="empty:Please enter Picture code"
            type="text"
            id="img-code" />
        </div>
        <div class="login-inp" style="position: relative">
          <label>CAPTCHA</label>
          <input
            validate="empty:Please enter CAPTCHA"
            type-name="validate_code"
            type="number"
            maxlength="6" />
          <span
            class="sms-btnGet"
            style="
              position: absolute;
              right: 0;
              top: 0px;
              width: 100px;
              height: 38px;
              line-height: 38px;
              text-align: center;
              font-size: 14px;
              color: #fff;
            "
            >Get CAPTCHA</span
          >
        </div>
        <div class="login-inp" id="login">
          <a href="javascript:;" class="loginbtn">login now</a>
        </div>
      </div>
      <div class="login-txt">
        <a href="<%=basePath%>/">Account login</a> &nbsp;&nbsp;|&nbsp;&nbsp;
        <a href="<%=basePath%>/service/wiot/register">Sign Up</a>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    var flag = true;
    $(function () {
      iosInitForm('.login-inp input');

      reflash();

      $('.sms-btnGet').click(function () {
        if (!flag) {
          return;
        }
        // 发送验证码请求
        var phone = $('.name').val();
        if (validater.empty(phone) || !validater.phone(phone)) {
          $.toptip('请输入手机号码', 'error');
          return;
        }
        var code = $('#img-code').val();
        commonAjax(
          'GET',
          localUrl + '/security_code/' + phone + '?code=' + code + '&type=0',
          '',
          function (data) {
            if (isOK(data)) {
              resetTime(59);
              flag = false;
              tip('验证码发送成功');
            } else {
              $.toptip(data.statusMsg, 'error');
            }
          }
        );
      });
    });

    function resetTime(time) {
      var s = time;
      timer = setInterval(countDown, 1000);
      function countDown() {
        s--;
        if (s < 2) {
          flag = true;
          $('.sms-btnGet').html('获取验证码');
          clearInterval(timer);
        } else {
          $('.sms-btnGet').html('(' + s + '秒' + ')');
        }
      }
    }

    function reflash() {
      commonAjax('GET', localUrl + '/get/validate/code', '', function (data) {
        if (isOK(data)) {
          draw2(data.data);
        } else {
          $.toptip(data.statusMsg, 'error');
        }
      });
    }

    function draw2(showTxt) {
      var canvas_width = $('#canvas2').width();
      var canvas_height = $('#canvas2').height();
      var canvas = document.getElementById('canvas2'); //获取到canvas的对象，演员
      var context = canvas.getContext('2d'); //获取到canvas画图的环境，演员表演的舞台
      canvas.width = canvas_width;
      canvas.height = canvas_height;
      var aCode = showTxt.split(',');
      var aLength = aCode.length; //获取到数组的长度
      for (var i = 0; i < 4; i++) {
        //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
        var deg = Math.random() - 0.5; //产生一个随机弧度
        var txt = showTxt[i]; //得到随机的一个内容
        var x = 10 + i * 20; //文字在canvas上的x坐标
        var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
        context.font = 'bold 23px 微软雅黑';
        context.translate(x, y);
        context.rotate(deg);
        context.fillStyle = randomColor();
        context.fillText(txt, 0, 0);
        context.rotate(-deg);
        context.translate(-x, -y);
      }
      for (var i = 0; i <= 5; i++) {
        //验证码上显示线条
        context.strokeStyle = randomColor();
        context.beginPath();
        context.moveTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.lineTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.stroke();
      }
      for (var i = 0; i <= 30; i++) {
        //验证码上显示小点
        context.strokeStyle = randomColor();
        context.beginPath();
        var x = Math.random() * canvas_width;
        var y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
      }
    }

    //得到随机的颜色值
    function randomColor() {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return 'rgb(' + r + ',' + g + ',' + b + ')';
    }

    function sunccessReturn(data) {
      if (isOK(data)) {
        localStorage.setItem('ucode', data.data.user_key);
        forward('/wiot/scene');
      } else {
        $.toptip(data.statusMsg, 'error');
      }
    }
  </script>
</html>
